<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',border:true,split:true," style="width:150px; padding:5px;" title="用户管理">
        <ul class="easyui-tree" id="wu-user-tree"></ul>
    </div>
    <div data-options="region:'center',border:false">
        <!-- Begin of toolbar -->
        <div id="user-toolbar">
            <div class="wu-toolbar-button">
                <a class="easyui-linkbutton" href="#" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-cancel" onclick="cancel()" plain="true">取消</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-print" onclick="openAdd()" plain="true">打印</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-help" onclick="openEdit()" plain="true">帮助</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-undo" onclick="remove()" plain="true">撤销</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-redo" onclick="cancel()" plain="true">重做</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-sum" onclick="reload()" plain="true">总计</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-back" onclick="reload()" plain="true">返回</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-tip" onclick="reload()" plain="true">提示</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-save" onclick="reload()" plain="true">保存</a>
                <a class="easyui-linkbutton" href="#" iconCls="icon-cut" onclick="reload()" plain="true">剪切</a>
            </div>
            <div class="wu-toolbar-search">
                <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
                <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
                <label>用户组：</label>
                <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                    <option value="0">选择用户组</option>
                    <option value="1">黄钻</option>
                    <option value="2">红钻</option>
                    <option value="3">蓝钻</option>
                </select>
                <label>关键词：</label><input class="wu-text" style="width:100px">
                <a class="easyui-linkbutton" href="#" iconCls="icon-search">开始检索</a>
            </div>
        </div>
        <!-- End of toolbar -->
        <table id="user-datagrid" toolbar="#user-toolbar"></table>
    </div>
</div>
<!-- Begin of easyui-dialog -->
<div class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" id="user-dialog"
     style="width:400px; padding:10px;">
    <form id="user-form" method="post">
        <table>
            <input name="user.id" type="hidden" value="0"/>
            <tr>
                <td align="right" width="60">节点名称:</td>
                <td><input class="wu-text" name="zone.name" type="text"/></td>
            </tr>
            <tr>
                <td align="right">HOST:</td>
                <td><input class="wu-text" name="zone.host" type="text"/></td>
            </tr>
            <tr>
                <td align="right">端 口:</td>
                <td><input class="wu-text" name="zone.port" type="text"/></td>
            </tr>
            <tr>
                <td align="right">类 名:</td>
                <td><input class="wu-text" name="zone.className" type="text"/></td>

            </tr>


            <!-- <tr>
                 <td valign="top" align="right">内 容:</td>
                 <td><textarea name="content" rows="6" class="wu-textarea" style="width:260px"></textarea></td>
             </tr>-->
        </table>
    </form>
</div>

<!-- End of easyui-dialog -->
<script type="text/javascript">
    /**
     * Name 载入菜单树
     */
    $('#wu-user-tree').tree({
        url: '/menu/getRootMenu.do?id=1&level=0&type=tree',
        onClick: function (node) {
            alert(node.text);
        }
    });

    /**
     * Name 获取roleID
     */
    function getRoleList() {
        $.ajax({
            url: '/role/getRoleList.do',
            data: '',
            success: function (data) {
                var str = "";
                if (data.success) {
                    $.each(data.object, function (i, role) {
                        str = str + "<option value='" + role.id + "'>" + role.name + "</option>";
                    });
                    $('#roleList').empty().append(str);
                } else {
                    alert(data.message);
                }
            }
        });
    }

    /**
     * Name 添加记录
     */
    function add() {
        $('#user-form').form('submit', {
            url: '/user/insertUser.do',
            success: function (data) {
                var data = eval('(' + data + ')'); // change the JSON string to javascript object
                if (data.success) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#user-dialog').dialog('close');
                    reload();
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
    }

    /**
     * Name 修改记录
     */
    function edit() {

        //  var id= $('#user-datagrid').datagrid('getSelections');
        $('#user-form').form('submit', {
            url: '/user/editUser.do',
            /*   onSubmit: function(user){
                   user.id = id;
               },*/
            success: function (data) {
                if (data) {
                    $.messager.alert('信息提示', '提交成功！', 'info');
                    $('#user-dialog').dialog('close');
                    reload();
                } else {
                    $.messager.alert('信息提示', '提交失败！', 'info');
                }
            }
        });
    }

    /**
     * Name 删除记录
     */
    function remove() {
        $.messager.confirm('信息提示', '确定要删除该记录？', function (result) {
            if (result) {
                var items = $('#user-datagrid').datagrid('getSelections');
                //var ids = [];
                var ids = "";
                $(items).each(function () {
                    //ids.push(this.id);
                    ids = ids + this.id + ",";
                });
                //alert(ids);return;
                $.ajax({
                    url: '/user/deleteUsers.do',
                    data: 'ids=' + ids,
                    success: function (data) {
                        //var data = eval('(' + data + ')'); // change the JSON string to javascript object
                        if (data.success) {
                            $.messager.alert('信息提示', '提交成功！', 'info');
                            reload();
                        } else {
                            $.messager.alert('信息提示', '删除失败！', 'info');
                        }
                    }
                });
            }
        });
    }

    /**
     * Name 打开添加窗口
     */
    function openAdd() {
        $('#user-form').form('clear');
        $('#user-dialog').dialog({
            closed: false,
            modal: true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog').dialog('close');
                }
            }]
        });
    }

    /**
     * Name 打开修改窗口
     */
    function openEdit() {
        $('#user-form').form('clear');
        var item = $('#user-datagrid').datagrid('getSelected');
        //alert(item.productid);return;
        $.ajax({
            url: '/user/getUserList.do',
            data: 'user.id=' + item.id,
            success: function (data) {
                if (!data.success) {
                    $('#user-dialog').dialog('close');
                } else {

                    // var jsonstr=JSON.stringify(data.object[0]);
                    data = data.object[0];
                    //绑定值
                    $('#user-form').form('load', {
                        'user.id': data.id,
                        'user.nickname': data.nickname,
                        'user.email': data.email,
                        'user.phone': data.phone,
                        'user.role_id': data.role_id
                    });
                }
            }
        });
        $('#user-dialog').dialog({
            closed: false,
            modal: true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: edit
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#user-dialog').dialog('close');
                }
            }]
        });
    }


    function reload() {
        $('#user-datagrid').datagrid('reload');
    }

    /**
     * Name 分页过滤器
     */
    function pagerFilter(data) {
        data = data.object;
        //alert(data);
        if (typeof data.length == 'number' && typeof data.splice == 'function') {// is array
            data = {
                total: data.length,
                rows: data
            }
        }
        //alert(data);
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage: function (pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {pageNumber: pageNum, pageSize: pageSize});
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }

    /**
     * Name 载入数据
     */
    $('#user-datagrid').datagrid({
        url: 'zookeeper/getAllZone.do',
        loadFilter: pagerFilter,
        rownumbers: true,
        singleSelect: false,
        pageSize: 20,
        pagination: true,
        multiSort: true,
        fitColumns: true,
        fit: true,
        columns: [[
            {checkbox: true},
            {field: 'name', title: '节点名称', width: 180, sortable: true},
            {field: 'host', title: 'host', width: 100},
            {field: 'port', title: 'port', width: 100},
            {field: 'className', title: 'className', width: 100}
        ]]
    });

</script>